HTML5系列 08 表单系标签

2023-04-09 00:30| 来源: 网络整理| 查看: 265

form 表单基本介绍

form表单可用于向服务端提交数据，它是一个块级标签。

我们常见的登录框、留言板等很多功能都是通过form表单完成的，使用form表单进行数据提交会导致页面的刷新。

下面将采用flask框架作为后端，使用form表单进行一次数据提交。

后端代码：

from flask import Flask from flask import request app = Flask(__name__) @app.route("/get", methods=['GET']) def get_handler(): return f"{request.args}" @app.route("/post", methods=['POST']) def post_handler(): return f"{request.form}" if __name__ == "__main__": app.run(debug=True)

前端代码：

Document username password male female submit

整体效果如下：

前端提交的数据会被后端的服务器所接收到。

action 提交地址

form表单中action属性可设置表单内容的提交地址。

它指向一个url，一般情况下我们都会加上完整url，但如果你是前后端混合开发项目的话则可以不用加完整url。

下面这个是完整路径，如果点击提交表单它会朝这个url发起请求：

如果你把他改为非完整路径，它会朝当前页面发起请求，注意观察下面与上述地址栏中的端口变化：

method 提交方式

form表单中的method属性可设置表单提交时的HTTP请求方式。

有2种选项：

GET请求（form提交时的默认选择）POST请求

它们的区别如下。

GET请求：

没有请求体数据必须控制在1KB之内请求的数据会暴露在地址栏中（?之后，以&进行分割）

POST请求：

有请求体数据的大小没有上限请求的数据不会暴露在地址栏中，因此相较于GET请求更加安全

以下行为将会触发GET请求：

地址栏直接输入地址并访问点击页面a标签进行链接跳转默认的form表单提交方式img的图像资源请求

说的更直白一点，GET请求不能上传文件，但是POST请求可以上传文件。

enctype 数据编码

form表单中的enctype属性可设置表单提交时对于提交数据的编码方式。

application/x-www-form-urlencoded：url编码格式，也是form表单默认的编码格式，它不允许上传文件，一般配合GET方式使用multipart/form-data：不对字符进行编码，它允许上传文件，一般配合POST方式进行使用text/plain：将空格转换为“+”号，但不对特殊字符进行编码

url编码格式的特点：

将空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值

一言以蔽之，若想上传文件，则必须使用POST请求方式 + multipart/form-data的编码方式：

target 提交结果

form表单中的target属性可设置表单提交后会在哪里打开action的提交结果。

有以下5个值：

_blank：在新窗口中打开action的提交结果_parent：在父窗口中打开action的提交结果_self：在当前窗口中打开action的提交结果（默认值）_top：在顶级窗口中打开action的提交结果framename：在内联框架iframe中打开action的提交结果

这个属性其实很少用到，但是该属性可以搭配一些其他的技术做到文件上传的功能，因此这里例举一下，后面也会有所介绍。

示例如下，提交后将会在新的页面打开提交结果：

novalidate 取消验证

form表单中的novalidate属性可设置表单提交时不会验证填入数据的合法性。

有的input框可以设置为必填，如果一个必填的input框没有填入内容则在提交时浏览器将提示必须填写该字段，我们可以通过设定novalidate来取消这个验证功能。

如下是设置了提交验证的表单：

submit

当点击提交时浏览器会提示你填入该字段：

如果为form表单加上了novalidate属性后，它将会直接提交，注意观察地址栏中的变化：

submit

点击提交后页面会刷新一次，这代表已经绕过验证成功提交了：

input 输入框基本介绍

input标签为表单输入框，它是一个内联块级标签。

input框有多种形态，只需要设置属性type的值即可，如下表所示：

属性值表现形式对应代码text文本输入框

【本文地址】

公司简介

联系我们